<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>CSS 动态搜索框</title>
    <style>
        input[type=text] {
            width: 130px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            background-image: url('searchicon.png');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px;
            -webkit-transition: width 0.4s ease-in-out;
            transition: width 0.4s ease-in-out;
        }

        input[type=text]:focus {
            width: 100%;
        }
    </style>
</head>

<body>
    <p>动态搜索框:</p>

    <form>
        <input type="text" name="search" placeholder="搜索..">
    </form>
</body>

</html>